<!DOCTYPE html>
<#include "/ftl/header.ftl">
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>

<script type="text/javascript">

    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck
        }
    };

    function onCheck(e, treeId, treeNode) {
        count();
    }
    function count() {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
            checkCount = zTree.getCheckedNodes(true);
        console.log(checkCount)
        var nodes=[];
        for (var i=0, l=checkCount.length; i<l; i++) {
            nodes.push(checkCount[i].id);
        }
        console.log(nodes)
        $("#nodes").val(nodes);
    }


    var zNodes = new Array();
    $.ajax({
        url: '../role/getMenu',//地址
        dataType: 'json',//数据类型
        type: 'GET',//类型
        timeout: 2000,//超时
        //请求成功
        success: function (data) {
            for (var i = 0; i < data.length; i++) {
                var nodes = {'id': '', 'pId': '', 'name': '','checked':false, 'open': true}
                nodes.id = data[i].id;
                nodes.pId = data[i].parent;
                nodes.name = data[i].menuName;
                zNodes.push(nodes)
            }
        },
    });
    let arr = zNodes;
    setTimeout(() => {
        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, arr);
        });
    }, 500);

</script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#btnsub").on("click",function(){
            $("#formData").submit();
        });
    });

    function back() {
        window.history.back(-1); //返回上一页
    }
</script>
<#include "/ftl/menu.ftl">
<body>
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <ol class="breadcrumb">
                <li><a href="#">用户管理</a></li>
                <li><a href="#">角色管理</a></li>
                <li class="active">角色新增</li>
            </ol>
        </div>
    </div>
    <div class="col-md-12">
        <form  method="post"  enctype="multipart/form-data" id="formData">
            <div class="controls npt">
                <div class="block">
                    <div class="col-md-1">
                    </div>
                    <div class="col-md-4">
                                <div class="block">
                                    <div class="content_wrap">
                                        <div class="zTreeDemoBackground left">
                                            <ul id="treeDemo" class="ztree"></ul>
                                        </div>
                                    </div>
                                </div>
                    </div>

                    <div class="col-md-5">
                        <div class="form-row">
                            <div class="col-md-2">名称<span style="color: red">*</span></div>
                            <div class="col-md-3"><input type="text" class="form-control" id="roleName" name="roleName"></input>
                                <input type="hidden" id="nodes" name="nodes">
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="col-md-2">状态<span style="color: red">*</span></div>
                            <div class="col-md-3">
                                <select name="status">
                                    <option value="1">启用</option>
                                    <option value="0">禁用</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="col-md-6">
                                <button class="btn btn-default btn-clean"  id="btnsub" type="button">提交</button>
                                <button class="btn btn-default btn-clean"   onclick="back()" type="button">返回</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </form>
    </div>
</div>
</body>
</html>